<template>
<div class="city_map" v-loading='isLoading' element-loading-background="rgba(0, 0, 0, 0.3)" element-loading-text="正在加载">
  <div class="header">全国重点城市排名</div>
  <div class="chainLi">
    <div :class="[chain_id==item.id?'choose':'' ,'item']" v-for="item in chainList" :key="item.id" @click="change(item)">{{item.chain_name}}</div>
  </div>
  <div id="fxmap"></div>
  <div class="bg_b">
    <div id="pmLine"></div>
  </div>
  <div class="orange mb20" v-show="has">
    <div class="orangeB"></div>
    全国前十城市排名
  </div>
  <div id="shiLine" v-if="has" v-loading='isLoading' element-loading-background="rgba(0, 0, 0, 0.3)" element-loading-text="正在加载"></div>
</div>
</template>
<script>
import "../../../../node_modules/echarts/map/js/china";
import { GetChildrenLabelArray , chain_city_map,CompayOrParkNumOnCityMap } from "@/api/api";
import mapAll from "@/utils/mapAll.json";
import { option,option3 as option1 } from "../mapData.js";
var convertData = function (data) {
  var res = [];
  for (var i = 0; i < data.length; i++) {
    res.push({
      name: data[i].city_name.split('省')[0],
      value: data[i].total,
    });
  }
  return res;
};
var myChart = null;
var myChart1 = null;
var myChart2 = null;

export default {
  data(){
    return{
      chainList:[],
      chain_id:'',
      isLoading:false,
      isLoading1:false,
      xData1:[],
      has:false,
    }
  },
  created(){
    this.getData()
  },
  mounted(){
    myChart = this.$echarts.init(document.getElementById('fxmap'))
    window.onresize = myChart.resize
    window.addEventListener("resize", myChart.resize)

    option1.series[0].map = "china";
    myChart.setOption(option1);

    myChart1 = this.$echarts.init(document.getElementById('pmLine'))
    window.onresize = myChart1.resize
    window.addEventListener("resize", myChart1.resize)
    myChart1.on('click', (params)=>{
      this.city_id = params.data.id
      console.log(this.city_id,this.chain_id,this.chain_name)
      this.$emit('showList',{city_id:this.city_id,chain_id:this.chain_id,chain_name:this.chain_name})
    })
  },
  beforeDestroy(){
    if(myChart){
      myChart.clear()
    }
    if(myChart1){
      myChart1.clear()
    }
    if(myChart2){
      myChart2.clear()
    }
  },
  methods:{
    getData(item){
      GetChildrenLabelArray({chain_id:this.$route.query.chain_id||'126791',is_children:0,id:this.$route.query.id||50}).then(res=>{
        console.log(res)
        this.chainList=res.data
        this.chain_id = res.data[0].id
        this.chain_name = res.data[0].chain_name
        this.getLine(res.data[0].id)
        this.getLine1(res.data[0].id)
      })
    },
    change(item){
      this.chain_id=item.id
      this.chain_name=item.chain_name
      this.getLine(item.id)
      this.getLine1(item.id)
    },
    getLine(chain_id){
      this.isLoading=true
      chain_city_map({city_id:1,chain_id}).then(res=>{
        this.lineList=res.data
        this.draw(this.lineList)
        this.isLoading=false
      })
    },
    getLine1(chain_id){
      this.isLoading1=true
      CompayOrParkNumOnCityMap({city_id:1,chain_id}).then(res=>{
        this.has=res.data.length>0
        this.$nextTick(()=>{
          this.draw1(res.data.slice(0, 10))
        })
        this.isLoading1=false
      })
    },
    draw(list){
      this.xData=[]
      this.yData=[]
      if(!list){
        return
      }
      option1.series[0].data = convertData(list)
      let list1 = list.sort(function(a, b) {
        return b.total- a.total;
       }).slice(0, 10)

      if(list1[0].total==0){
        option1.visualMap.max=1
      }else{
        option1.visualMap.max = list1[0].total>500?500:list1[0].total
      }
      
      myChart.setOption(option1,true)
      
      list1 = list1.sort(function(a, b) {
        return a.total- b.total;
      })
      list1.forEach(item => {
        this.xData.push(item.city_name)
        this.yData.push({value:parseInt(item.total),id:item.id})
      });
      // 绘制图表
      myChart1.setOption({
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' }
        },
        grid: {
          top:'0',
          left: '0',
          right: '40',
          bottom: '0',
          containLabel: true
        },
        xAxis: [
          {
            name:'家',
            nameTextStyle:{
              fontSize:16
            },
            boundaryGap: false,
            type: 'value',
            show:false,
            axisLine: {
              show:false,
              lineStyle: {
                color: '#666',
              }
            },
            splitLine:{
              show:false
            },
            axisLabel: {
              // show:false,
              formatter: '{value}',
              textStyle: {
                color: '#666',
                fontSize: 14
              }
            },
          }
        ],
        yAxis: [
          {
            type: 'category',
            data: this.xData,
            axisLine: {
              show:false,
              lineStyle: {
                color: '#666',
              }
            },
            axisTick:{
              show:false
            },
            axisLabel: {
              textStyle: {
                color: '#666',
                fontSize: 12
              }
            },
          }
        ],
        series: [
          {
            type: 'bar',
            barWidth: '60%',
            stack: '1',
            label: {
              show: true,
              position: 'right',
              color:'#666'
            },
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 1, [{
                  offset: 0,
                  color: '#1C55FF'
                }, {
                  offset: 1,
                  color: '#69B2FF'
                }]),
              }
            },
            data:this.yData
          }
        ]
      });
    },
    draw1(list){
      myChart2 = this.$echarts.init(document.getElementById('shiLine'))
      window.onresize = myChart2.resize
      window.addEventListener("resize", myChart2.resize)
      myChart2.on('click', (params)=>{
        this.city_id = params.data.id
        console.log(this.city_id)
        this.$emit('showList',{city_id:this.city_id,chain_id:this.chain_id,chain_name:this.chain_name})
      })

      this.xData1=[]
      this.yData1=[]
      if(!list){
        return
      }
      list.forEach(item => {
        this.xData1.push(item.city_name)
        this.yData1.push({value:parseInt(item.total),id:item.city_id})
      });
      // 绘制图表
      myChart2.setOption({
        color: ['#3398DB'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '0%',
            right: '20',
            bottom: '10',
            top: '30',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: this.xData1,
                axisLine: {
                  show:false,
                  lineStyle: {
                    color: '#666',
                  }
                },
                axisTick:{
                  show:false
                },
                splitLine:{
                  show:false
                },
                axisLabel: {
                  formatter: '{value}',
                  textStyle: {
                    color: '#666',
                    fontSize: 14
                  },
                  interval:0,  
                  rotate:40  
                },
            }
        ],
        yAxis: [
            {
                name:'亿',
                type: 'value',
                show:false,

                // axisLine: {
                //   show:false,
                //   lineStyle: {
                //     color: '#666',
                //   }
                // },
                // splitLine:{
                //   show:false
                // },
                // axisLabel: {
                //   textStyle: {
                //     color: '#666',
                //     fontSize: 14
                //   }
                // },
            }
        ],
        series: [
        {
            type: 'bar',
            barWidth: '60%',
            data: this.yData1,
            label: {
              show: true,
              position: 'top',
              color:'#666'
            },
            itemStyle: {
            normal: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 1, [{
                offset: 0,
                color: '#1C55FF'
              }, {
                offset: 1,
                color: '#69B2FF'
              }]),
            }
          }
        }
      ]});
    }
  }
}
</script>
<style lang="scss" scoped>
.city_map{
  // height: 350px;
  // width: 100%;
  margin: 5px;
  border: 2px solid #ccc;
  border-radius: 5px;
  background: #f3f4fb;
  .header{
    margin: 5px;
    font-size: 18px;
    font-weight: 600;
  }
  position: relative;
}
.bg_b{
  // background: rgba(4, 121, 189, 0.5);
  width: 100%;
  height:300px;
  white-space: nowrap;
  overflow: hidden;;
  display: flex;
  justify-content: center;
  align-items: center;
  // padding: 20px;
}
.chainLi{
  width: 100%;
  // padding-bottom: 10px;
  font-size: 13px;
}
#fxmap{
  width: 100%;
  height: 300px;
}
.item{
  display: inline-block;
  padding: 5px 5px;
  color: #888;
  cursor: pointer;
}
.item:hover{
  background: #ff9933;
  color: #fff;
}
.choose{
  // background: #ff9933;
  color: #ff9933;
}
#pmLine{
  width: 90%;
  height: 90%;
  margin-top: 3%;
}
#shiLine{
  width: 100%;
  height: 300px;
}
.orangeB{
  height: 20px;
  width: 20px;
  background: #ff9933;
  margin-right: 10px;
  margin-left: 5px;
  position: relative;
  z-index: 2;
}
.orange{
  font-size: 18px;
  font-weight: 600;
  color: #ff9933;
  align-items: center;
}
.mb20{
  border-top: 1px dashed #ff9933;
  padding: 10px 0;
  display: flex;
  align-items: center;
}
</style>